<!--
 * @Author: xuxu12138 1718324422@qq.com
 * @Date: 2023-09-02 14:12:01
 * @LastEditors: xuxu12138 1718324422@qq.com
 * @LastEditTime: 2024-08-08 08:19:28
 * @FilePath: /things-admin/src/view/dataScreen/components/right_echarts/middle.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="content">
    <div class="header">
      <div class="title">售后信息</div>
      <img src="../../images/997.png" alt="" @click.stop="cope" />
    </div>
    <div class="main">
      <div class="left">
        <div id="echarts_twelve"></div>
        <div class="desc1">{{ total }}</div>
        <div class="desc2">维修统计</div>
      </div>
      <div class="right">
        <div id="echarts_threteen"></div>
        <div id="echarts_fourteen"></div>
        <div id="echarts_fifteen"></div>
      </div>
    </div>
    <div class="tanchuang" v-show="isMask">
      <div class="header">
        <div class="title">售后信息</div>
        <div class="el-icon-circle-close" @click.stop="cope"></div>
      </div>
      <div class="main">
        <div class="left">
          <div id="echarts_twelve_copy"></div>
          <div class="desc1">{{ total }}</div>
          <div class="desc2">维修统计</div>
        </div>
        <div class="right">
          <div id="echarts_threteen_copy"></div>
          <div id="echarts_fourteen_copy"></div>
          <div id="echarts_fifteen_copy"></div>
        </div>
      </div>
    </div>
    <div class="isMask" v-show="isMask"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { statistics } from "@/base/api/DataScreen.ts";
export default {
  data() {
    return {
      num: "",
      total: 0, // 维修统计总数
      provinceId: this.provinceId || "", //省份ID
      cityId: this.cityId || "", //城市ID
      name: this.name || "", //城市名称
      weixiu: [], // 维修进度
      count: [], //评价数量
      brokeArr: [], // 故障类型数据
      brokeNum: [], //故障数量
      productArr: [], //型号
      productNum: [], //型号数量
      productArrCopy: [], //型号
      productNumCopy: [], //型号数量
      isMask: false
    };
  },
  props: ["provinceId", "cityId", "name"],
  watch: {
    provinceId(newval) {
      this.provinceId = newval;
    },
    cityId(newval) {
      this.cityId = newval;
    },
    name(newval) {
      this.name = newval;
    }
  },
  methods: {
    // 售后接口 维修统计
    statistics() {
      let type = "process";
      statistics(
        this.provinceId ? this.provinceId : 0,
        this.cityId ? this.cityId : 0,
        0,
        type
      ).then(res => {
        let arr = [];
        this.total = 0;
        arr = JSON.parse(res.data).errMsg;
        arr.forEach((item, index) => {
          if (index <= 4) {
            let obj = {};
            obj.value = item.count;
            obj.name = item.PostSaleState;
            this.weixiu.push(obj);
          }
          this.total += Number(item.count);
        });

        this.total = this.total
          .toString()
          .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        this.echartsTwelve();
        this.echartsTwelveCopy();
      });
    },
    // 评价星数
    star() {
      let type = "star";
      statistics(
        this.provinceId ? this.provinceId : 0,
        this.cityId ? this.cityId : 0,
        0,
        type
      ).then(res => {
        let arr = [];
        arr = JSON.parse(res.data).errMsg;
        let goodNum = 0;
        let middleNum = 0;
        let badNum = 0;
        arr.forEach(item => {
          // this.pingjia.push( <  2 ? '差评':item.Star < 4 ? '中评':'好评')
          if (item.Star < 2) {
            badNum += Number(item.count);
          } else if (item.Star < 4 && item.Star >= 2) {
            middleNum += Number(item.count);
          } else {
            goodNum += Number(item.count);
          }
        });
        this.count.push(goodNum);
        this.count.push(middleNum);
        this.count.push(badNum);
        this.echartsThreteen();
        this.echartsThreteenCopy();
      });
    },
    // 故障类型
    broken() {
      let type = "broken";
      statistics(
        this.provinceId ? this.provinceId : 0,
        this.cityId ? this.cityId : 0,
        0,
        type
      ).then(res => {
        let arr = [];
        this.brokeArr = [];
        this.brokeNum = [];
        arr = JSON.parse(res.data).errMsg;
        arr.forEach(item => {
          this.brokeArr.push(item.name);
          this.brokeNum.push(item.count);
        });
        this.echsrtsFifteen();
        this.echsrtsFifteenCopy();
      });
    },
    // 故障型号
    model() {
      let type = "model";
      statistics(
        this.provinceId ? this.provinceId : 0,
        this.cityId ? this.cityId : 0,
        0,
        type
      ).then(res => {
        let arr = [];
        this.productArr = [];
        this.productNum = [];
        this.productArrCopy = [];
        this.productNumCopy = [];
        arr = JSON.parse(res.data);
        arr.forEach((item, index) => {
          if (index <= 6) {
            this.productArr.push(item.model);
            this.productNum.push(item.count);
          }
          this.productArrCopy.push(item.model);
          this.productNumCopy.push(item.count);
        });
        this.echartsFourteen();
        this.echartsFourteenCopy();
      });
    },
    //复制信息
    cope() {
      this.isMask = !this.isMask;
    },
    echartsTwelve() {
      let myChartTwelve = echarts.init(
        document.getElementById("echarts_twelve", null, { renderer: "svg" })
      );
      myChartTwelve.resize({
        width: "170px",
        height: "170px"
      });
      let option = {
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "建议总数",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 8,
              formatter: function(params) {
                return params.name;
                // return params.name + "\n" + +Math.round(params.percent) + "%";
              }
            },

            data: this.weixiu
          }
        ]
      };
      myChartTwelve.setOption(option);
    },
    echartsThreteen() {
      let myChartThreteen = echarts.init(
        document.getElementById("echarts_threteen", null, { renderer: "svg" })
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          name: "评价\n类型",
          nameLocation: "start",
          nameGap: 0,
          data: ["好评", "中评", "差评"],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "bottom"
          }
        },
        yAxis: {
          name: "数量",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.count,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10,
              formatter: function(params) {
                // 判断是否大于 1000，如果大于则将数字转化为千分位格式
                if (params.value > 1000) {
                  if (params.value % 1000 == 0) {
                    var num = "000";
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                  if (0 < params.value % 1000 < 10) {
                    let num = "00" + (params.value % 1000);
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                  if (10 < params.value % 1000 < 100) {
                    let num = "0" + (params.value % 1000);
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                  if (100 < params.value < 1000) {
                    let num = params.value % 1000;
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                } else {
                  return params.value;
                }
              }
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "30%" //柱子的宽度
          }
        ]
      };
      myChartThreteen.setOption(option);
    },
    echartsFourteen() {
      let myChartFourteen = echarts.init(
        document.getElementById("echarts_fourteen", null, { renderer: "svg" })
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "10%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          name: "型号",
          nameLocation: "start",
          nameGap: 0,
          data: this.productArr,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        yAxis: {
          name: "维保",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.productNum,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "40%" //柱子的宽度
          }
        ]
      };
      myChartFourteen.setOption(option);
    },
    echsrtsFifteen() {
      let myChartFifteen = echarts.init(
        document.getElementById("echarts_fifteen", null, { renderer: "svg" })
      );
      let option = {
        legend: {},
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item"
        },
        xAxis: {
          name: "故障\n分类",
          nameLocation: "start",
          nameGap: 0,
          data: this.brokeArr,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 10
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        yAxis: {
          name: "维保",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 9, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.brokeNum,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 10
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "35%" //柱子的宽度
          }
        ]
      };
      myChartFifteen.setOption(option);
    },
    echartsTwelveCopy() {
      let myChartTwelve = echarts.init(
        document.getElementById("echarts_twelve_copy", null, {
          renderer: "svg"
        })
      );
      myChartTwelve.resize({
        width: "340px",
        height: "340px"
      });
      let option = {
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        series: [
          {
            name: "建议总数",
            type: "pie",
            radius: "50%",
            labelLine: {
              show: false
            },
            label: {
              position: "inner",
              fontSize: 16,
              formatter: function(params) {
                return params.name;
                // return params.name + "\n" + +Math.round(params.percent) + "%";
              }
            },

            data: this.weixiu
          }
        ]
      };
      myChartTwelve.setOption(option);
    },
    echartsThreteenCopy() {
      let myChartThreteen = echarts.init(
        document.getElementById("echarts_threteen_copy", null, {
          renderer: "svg"
        })
      );
      let option = {
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "评价\n类型",
          nameLocation: "start",
          nameGap: 0,
          data: ["好评", "中评", "差评"],
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "bottom"
          }
        },
        yAxis: {
          name: "数量",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.count,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20,
              formatter: function(params) {
                // 判断是否大于 1000，如果大于则将数字转化为千分位格式
                if (params.value > 1000) {
                  if (params.value % 1000 == 0) {
                    var num = "000";
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                  if (0 < params.value % 1000 < 10) {
                    let num = "00" + (params.value % 1000);
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                  if (10 < params.value % 1000 < 100) {
                    let num = "0" + (params.value % 1000);
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                  if (100 < params.value < 1000) {
                    let num = params.value % 1000;
                    return (params.value / 1000).toFixed(0) + "," + num;
                  }
                } else {
                  return params.value;
                }
              }
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "30%" //柱子的宽度
          }
        ]
      };
      myChartThreteen.setOption(option);
    },
    echartsFourteenCopy() {
      let myChartFourteen = echarts.init(
        document.getElementById("echarts_fourteen_copy", null, {
          renderer: "svg"
        })
      );
      let option = {
        grid: {
          left: "4%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "10%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "型号",
          nameLocation: "start",
          nameGap: 0,
          data: this.productArrCopy,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "top"
          }
        },
        yAxis: {
          name: "维保",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.productNumCopy,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "40%" //柱子的宽度
          }
        ]
      };
      myChartFourteen.setOption(option);
    },
    echsrtsFifteenCopy() {
      let myChartFifteen = echarts.init(
        document.getElementById("echarts_fifteen_copy", null, {
          renderer: "svg"
        })
      );
      let option = {
        legend: {},
        grid: {
          left: "10%", // 距离容器左侧的距离
          right: "0%", // 距离容器右侧的距离
          top: "20%", // 距离容器顶部的距离
          bottom: "0%", // 距离容器底部的距离
          containLabel: true
        },
        tooltip: {
          trigger: "item",
          textStyle: {
            fontSize: 18,
            fontWeight: "bold"
          }
        },
        xAxis: {
          name: "故障\n分类",
          nameLocation: "start",
          nameGap: 0,
          data: this.brokeArr,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0, // 强制显示所有标签
            // margin:5,
            textStyle: {
              color: "#FFFFFF", // 设置x轴标签字体颜色
              fontSize: 20
            }
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right",
            verticalAlign: "bottom"
          }
        },
        yAxis: {
          name: "维保",
          nameGap: 0,
          nameLocation: "end",
          axisLine: {
            show: false // 隐藏y轴轴线
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          splitLine: {
            show: false // 隐藏y轴分隔线
          },
          nameTextStyle: {
            color: "#60D4FF", // 设置x轴名称的颜色为#333
            fontSize: 16, // 设置x轴名称的字体大小为16
            fontWeight: "bold", // 设置x轴名称的字体粗细为粗体
            align: "right"
          }
        },
        series: [
          {
            type: "bar",
            data: this.brokeNum,
            label: {
              show: true, // 显示标签
              position: "top", // 标签位置
              color: "#FFFFFF",
              fontSize: 20
            },
            itemStyle: {
              normal: {
                //柱状图渐变色设置
                color: function(params) {
                  var colorList = [
                    new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                      { offset: 0, color: "#00C9FF" },
                      { offset: 1, color: "rgba(0,201,255,0)" }
                    ])
                  ];
                  return colorList[params.dataIndex % colorList.length];
                },
                borderColor: "#00A5FF", // 设置柱子边框颜色为红色
                borderWidth: 1 // 设置柱子边框宽度为2
              }
            },
            barWidth: "35%" //柱子的宽度
          }
        ]
      };
      myChartFifteen.setOption(option);
    }
  },
  mounted() {
    this.statistics();
    this.star();
    this.broken();
    this.model();
  }
};
</script>

<style lang="less" scoped>
.content {
  width: 448.5px;
  height: 389.5px;
  // background-color: #fff;
  margin-top: 10px;
  background: url(../../images/3487.png) no-repeat;
  background-size: cover;
  .header {
    width: 448.5px;
    height: 46px;
    display: flex;
    align-items: center;
    .title {
      width: 80px;
      height: 29px;
      font-size: 20px;
      font-weight: 500;
      color: #ffffff;
      line-height: 29px;
      margin: 0 313.5px 0 21px;
    }
    img {
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    .left {
      width: 124px;
      height: 197.7px;
      margin: 72px 0 0 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      #echarts_twelve {
        width: 85px;
        height: 85px;
        // background-color: #fff;
        // margin-top: -30px;
        margin-left: -70px;
      }
      .desc1 {
        // width: 131px;
        height: 45px;
        font-size: 37px;
        font-weight: bold;
        color: #37e8fb;
        line-height: 45px;
        margin-top: 40px;
        margin-left: 15px;
      }
      .desc2 {
        height: 20px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        line-height: 20px;
        margin-top: 6.5px;
        margin-left: 15px;
      }
    }
    .right {
      width: 302px;
      height: 343.5px;
      // background-color: #fff;
      #echarts_threteen {
        width: 302px;
        height: 111px;
        // background-color: #fff;
      }
      #echarts_fourteen {
        width: 302px;
        height: 111px;
        // background-color: #ba1313;
      }
      #echarts_fifteen {
        width: 302px;
        height: 111px;
        // background-color: #10727d;
      }
    }
  }
  .tanchuang {
    position: fixed;
    z-index: 99999999;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background-color: #0a1632;
    .header {
      background: url(../../images/3487.png) no-repeat;
      background-size: cover;
      width: 100%;
      height: 46px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        width: 80px;
        height: 29px;
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        line-height: 29px;
        margin: 0 313.5px 0 21px;
      }
      div {
        width: 20px;
        height: 20px;
        font-size: 24px;
        color: #fff;
        cursor: pointer;
        margin-right: 20px;
      }
    }
    .main {
      width: 100%;
      overflow-x: auto;
      display: flex;
      overflow-y: hidden;
      .left {
        width: 464px;
        height: 387.7px;
        margin: 72px 0 0 0px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        #echarts_twelve_copy {
          width: 300px;
          height: 300px;
          // background-color: #fff;
          margin-top: 30px;
          margin-left: 10px;
        }
        .desc1 {
          // width: 131px;
          height: 45px;
          font-size: 57px;
          font-weight: bold;
          color: #37e8fb;
          line-height: 45px;
          margin-top: 0px;
          margin-left: 15px;
        }
        .desc2 {
          height: 20px;
          font-size: 32px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
          margin-top: 24.5px;
          margin-left: 15px;
        }
      }
      .right {
        width: 2602px;
        height: 683.5px;
        #echarts_threteen_copy {
          width: 602px;
          height: 211px;
          margin-left: -5px;
        }
        #echarts_fourteen_copy {
          width: 2602px;
          height: 211px;
          margin-left: -50px;
        }
        #echarts_fifteen_copy {
          width: 602px;
          height: 211px;
          margin-top: 20px;
          margin-left: -10px;
        }
      }
    }
  }
  .isMask {
    position: fixed;
    z-index: 99999998;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    background-color: rgba(0, 0, 0, 0.3);
  }
}
</style>
